<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

const router = useRouter()

const { isClick } = storeToRefs(useCounterStore())

const handlequit = () => {
  localStorage.removeItem('isLogin')
  router.push('/login')
}
</script>

<template>
  <div class="tal">
    <header>
      <div class="my">
        <img src="../components/images/商品管理头像.jpg" alt="" />
      </div>
      <h1>顶部菜单</h1>
      <button @click="handlequit">退出</button>
    </header>
    <main>
      <nav>
        <RouterLink to="/home/manage">
          <button
            @click="isClick = 1"
            :class="isClick == 1 ? 'haveclicked' : ''"
          >
            商品管理
          </button></RouterLink
        >
        <RouterLink to="/home/add">
          <button
            @click="isClick = 2"
            :class="isClick == 2 ? 'haveclicked' : ''"
          >
            添加商品
          </button>
        </RouterLink>
        <RouterLink to="/home/contact">
          <button
            @click="isClick = 3"
            :class="isClick == 3 ? 'haveclicked' : ''"
          >
            联系我们
          </button>
        </RouterLink>
      </nav>
      <div class="content">
        <RouterView></RouterView>
      </div>
    </main>
  </div>
</template>

<style scoped>
.tal {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  color: white;
  background: #5e5e5e;
  /* border-bottom: 2px solid black; */
}
header .my {
  position: absolute;
  left: 60px;
  width: 50px;
  height: 50px;
  background: green;
  border-radius: 50%;
}
header .my img {
  width: 100%;
  border-radius: 50%;
}
header button {
  position: absolute;
  right: 80px;
  padding: 5px 15px;
  color: red;
  background: #eeeeee;
  border: none;
  border-radius: 3px;
}
main {
  flex: 1;
  display: flex;
}
main nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 170px;
  background: #eeeeee;
  /* border-right: 2px solid black; */
}
main nav button {
  width: 120px;
  padding: 10px 15px;
  color: white;
  background: #5e5e5e;
  border: none;
  border-radius: 5px;
}

.haveclicked {
  background: #ff7a08;
}

main nav button:nth-child(1) {
  margin-top: 30px;
}
main .content {
  flex: 1;
  padding: 50px 100px;
  background: white;
}
</style>
